<draggable-component id="drag0" >
    <h1>Hover over elements to see their dimensions and position</h1>
    <a style="font-size:3vh ">This is a paragraph.</a>
    <button>A button</button>
</draggable-component>

<draggable-component id="drag1" >
    <h2>可拖拽内容 1</h2>
    <p>这里可以放任何 HTML 内容。</p>
    <div>
        <img id="drag1img" src="https://gips2.baidu.com/it/u=1674525583,3037683813&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024" alt="Placeholder" style="width:300px;height:280px;border-radius: 9px;">
    </div>
</draggable-component>
<draggable-component id="drag2" >
    <h3>可拖拽内容 2</h3>
    <p>包含一个按钮：</p>
    <button onclick="alert('按钮被点击了！')">点我</button>
    <p>即使有按钮，整个组件仍然可以拖拽。</p>
</draggable-component>
<draggable-component id="drag3"  >
    <h1>可拖拽内容 3</h1>
</draggable-component>

<draggable-component id="drag4">
    <big-bang character="abc" color="lightblue" id="hello" bgcolor="black">
        <h1 slot="title">sgc</h1>
    </big-bang>
</draggable-component>

<draggable-component id="drag5">
    <marquee direction="left" scrollamount="2" loop="infinite" width="100%" height="100%" bgcolor="lightblue" ><div  style="display: flex;align-items: center;width：auto;height:auto; /* 垂直居中 */"><img src="./img/down.png" style="position:relative;width:5vh;height: 5vh;top:0px;background: red;border-style: dotted;border-radius: 50%;"><span style="font-size: 5vh">这是一条简单的跑马灯文本.</span><img src="./img/down.png" style="position:relative;width:5vh;height: 5vh;top:0px;background: red;border-style: dotted;border-radius: 50%;"><span style="font-size: 5vh">这是一条简单的跑马灯文本.</span></div></marquee>

</draggable-component>
<draggable-component id="drag_2">
    <marquee direction="left" scrollamount="2" loop="infinite" width="100%" height="100%" bgcolor="lightblue" >
        <div  style="display: flex;align-items: center;width：auto;height:auto; ">
            <img src="./img/down.png" style="position:relative;width:5vh;height: 5vh;top:0px;background: red;border-style: dotted;border-radius: 50%;">
            <span style="font-size: 5vh">这是一条简单的跑马灯文本.</span>
            <img src="./img/down.png" style="position:relative;width:5vh;height: 5vh;top:0px;background: red;border-style: dotted;border-radius: 50%;">
            <span style="font-size: 5vh">SGC.</span>
        </div>
    </marquee>
</draggable-component>